<template>
  <div class="mainua">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>编辑商品</span>
          </div>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l"><em></em>基本信息</div>
        </div>
        <div class="maincla_form" v-loading="isLoading">
          <el-form
            :inline="true"
            :rules="rules"
            :model="monitorForm"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="110px"
          >
            <div>
              <el-form-item
                label="商品名称："
                prop="form.name"
                :rules="rules.name"
              >
                <el-input
                  v-model.trim="monitorForm.form.name"
                  placeholder="商品名称"
                  clearable
                  :disabled="
                    monitorForm.form.standard_goods_id > 0 ? true : false
                  "
                  class="wid240"
                ></el-input>
                <!-- @input="inputName" -->
              </el-form-item>
              <el-form-item
                label="商品分类："
                prop="form.category_id"
                :rules="rules.category_id"
                label-width="180px"
              >
                <!-- :disabled="
                    monitorForm.form.standard_goods_id > 0 ? true : false
                  " -->
                <el-cascader
                  v-model="monitorForm.form.category_id"
                  :options="options"
                  :props="defaultProps"
                  class="wid240"
                  @change="isEdit = true"
                ></el-cascader>
              </el-form-item>
              <div class="clearfix"></div>
              <el-form-item label="商品别名：" prop="form.byname">
                <el-input
                  v-model.trim="monitorForm.form.byname"
                  maxlength="20"
                  placeholder="商品别名"
                  show-word-limit
                  class="wid150 main_limit"
                  @change="isEdit = true"
                ></el-input>
                <el-checkbox
                  v-model="monitorForm.form.use_byname"
                  style="margin-left: 7px"
                  >使用别名</el-checkbox
                >
              </el-form-item>
              <el-form-item
                label="关键词："
                prop="form.pinyin"
                label-width="180px"
              >
                <el-input
                  v-model.trim="monitorForm.form.pinyin"
                  placeholder="默认拼音码"
                  clearable
                  class="wid240"
                ></el-input>
              </el-form-item>
              <div class="clearfix"></div>
              <el-form-item label="排序：" prop="form.sort">
                <el-input
                  v-model.trim="monitorForm.form.sort"
                  placeholder="排序"
                  clearable
                  class="wid240"
                  @change="isEdit = true"
                ></el-input>
              </el-form-item>

              <el-form-item label="商品品牌：" prop="" label-width="180px">
                <el-autocomplete
                  v-model="spu_name_title"
                  class="wid240"
                  clearable
                  @clear="bradnclearData"
                  :fetch-suggestions="newSearchAsync"
                  placeholder="商品品牌"
                  value-key="title"
                  @select="
                    (item) => {
                      brandSelect(item);
                    }
                  "
                >
                </el-autocomplete>
              </el-form-item>

              <div class="clearfix"></div>

              <el-form-item label="采购类型：" prop="type">
                <div class="boxnr" style="width: 240px">
                  <div class="maincla_lea">
                    <el-select
                      v-model.trim="
                        monitorForm.form.purchase_relation.purchase_type
                      "
                      placeholder="采购类型"
                      class="wid120"
                      @change="changePurchaseType"
                    >
                      <el-option
                        v-for="(type_list, index) in info.type_list"
                        :key="index"
                        :label="type_list"
                        :value="parseInt(index)"
                      ></el-option>
                    </el-select>
                  </div>
                  <el-checkbox
                    v-model.trim="monitorForm.form.specify"
                    class="marginLeft20"
                    style="margin-right: 0"
                    >临时指定</el-checkbox
                  >
                </div>
              </el-form-item>

              <el-form-item
                label="默认采购员"
                prop="form.purchase_relation.buyer_id"
                label-width="180px"
                v-if="monitorForm.form.purchase_relation.purchase_type == 1"
              >
                <el-select
                  v-model.trim="monitorForm.form.purchase_relation.buyer_id"
                  placeholder="默认采购员"
                  class="wid240"
                  filterable
                >
                  <el-option
                    v-for="(buyer, index) in info.buyer"
                    :key="index"
                    :label="buyer"
                    :value="parseInt(index)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="默认供应商"
                prop="form.purchase_relation.supply_id"
                label-width="180px"
                v-if="monitorForm.form.purchase_relation.purchase_type == 2"
              >
                <el-select
                  v-model.trim="monitorForm.form.purchase_relation.supply_id"
                  placeholder="默认供应商"
                  class="wid240"
                  filterable
                >
                  <el-option
                    v-for="(supplier, index) in info.supplier"
                    :key="index"
                    :label="supplier"
                    :value="parseInt(index)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="直供供应商："
                prop="form.purchase_relation.supply_id"
                label-width="180px"
                v-if="monitorForm.form.purchase_relation.purchase_type == 3"
              >
                <el-select
                  v-model.trim="monitorForm.form.purchase_relation.supply_id"
                  placeholder="直供供应商"
                  class="wid240"
                  filterable
                >
                  <el-option
                    v-for="(direct_supply, index) in info.direct_supply"
                    :key="index"
                    :label="direct_supply"
                    :value="parseInt(index)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="clearfix"></div>

              <el-form-item label="保质期：" prop="form.exp" class="wid240">
                <el-input
                  v-model.trim="monitorForm.form.exp"
                  placeholder="保质期"
                  clearable
                  class="wid240"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="税率："
                label-width="180px"
                prop="form.tax_rate"
              >
                <el-input
                  v-model.trim="monitorForm.form.tax_rate"
                  placeholder="税率"
                  clearable
                  class="wid240"
                  @change="isEdit = true"
                ></el-input>
              </el-form-item>

              <div class="clearfix"></div>
              <el-form-item label="编码(SPU)：" prop="form.goods_code">
                <div class="box">
                  <!-- || -->
                  <el-input
                    v-if="monitorForm.form.standard_goods_id > 0 ? false : true"
                    v-model.trim="monitorForm.form.goods_code"
                    placeholder="编码"
                    clearable
                    class="wid240"
                  ></el-input>
                  <el-input
                    v-if="monitorForm.form.standard_goods_id > 0 ? true : false"
                    v-model.trim="monitorForm.form.goods_code"
                    placeholder="编码"
                    clearable
                    :disabled="monitorForm.form.use_code[0] == 1 ? true : false"
                    class="wid240"
                  ></el-input>
                  <el-checkbox-group
                    v-model="monitorForm.form.use_code"
                    v-if="monitorForm.form.standard_goods_id > 0"
                  >
                    <el-checkbox
                      :label="1"
                      class="marginLeft20"
                      @change="
                        checkboxGroup(1),
                          (monitorForm.form.goods_code =
                            monitorForm.form.standard_code)
                      "
                      style="margin-right: 0"
                      >使用标准编码</el-checkbox
                    >
                    <el-checkbox
                      :label="0"
                      class="marginLeft20"
                      @change="
                        checkboxGroup(0), (monitorForm.form.goods_code = '')
                      "
                      style="margin-right: 0"
                      >使用自定义编码</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div class="clearfix"></div>
              <el-form-item
                label="产地："
                prop="form.madein"
                class="maincla_te"
              >
                <el-input
                  v-model.trim="monitorForm.form.madein"
                  placeholder="产地"
                  clearable
                  class="maincla_te"
                ></el-input>
              </el-form-item>
              <div class="clearfix"></div>
              <!-- <el-form-item
                label="商品描述："
                prop="form.describe"
                class="maincla_te"
              >
                <el-input
                  type="textarea"
                  placeholder="请输入商品描述"
                  v-model="monitorForm.form.describe"
                ></el-input>
              </el-form-item> -->
              <div class="box">
                <el-form-item label="上架状态：" prop="form.status">
                  <el-switch
                    v-model="monitorForm.form.status"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                    @change="statusChange"
                  ></el-switch>
                </el-form-item>
                <!-- <el-form-item
                  label="首页推荐："
                  prop="form.is_recommend"
                  label-width="100px"
                >
                  <el-switch
                    v-model="monitorForm.form.is_recommend"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </el-form-item> -->
                <el-form-item
                  label="标品："
                  prop="form.is_standard"
                  label-width="70px"
                >
                  <el-switch
                    v-model="monitorForm.form.is_standard"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </el-form-item>
              </div>
              <el-form-item
                label="商品标签："
                prop="form.label_ids"
                class="label_ids boxha"
              >
                <el-checkbox-group v-model="monitorForm.form.label_ids">
                  <el-checkbox
                    v-for="(tag, index) in info.tag"
                    :key="index"
                    :label="tag.id"
                    >{{ tag.title }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div class="main_tile boxdq">
              <div class="main_tile_l">
                <em></em>商品主图及详情
                <span>建议图片尺寸是:302*302，最多五张，主图为默认第一张</span>
              </div>
            </div>
            <div class="main_uqr">
              <div class="marginLeft10 main_upImg">
                <el-upload
                  :headers="{
                    Authorization: getToken(),
                  }"
                  :action="uploadPath"
                  list-type="picture-card"
                  :on-success="handSuccess"
                  :before-upload="beforeUpload"
                  :limit="5"
                  :file-list="filelist"
                  :show-file-list="false"
                  ref="upload"
                >
                  <span slot="default">
                    <svg
                      aria-hidden="true"
                      class="main_page_svg"
                      width="32"
                      height="27"
                    >
                      <use xlink:href="#icon-commodit_camera" />
                    </svg>
                  </span>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img style="height: 500px" :src="dialogImageUrl" alt />
                </el-dialog>
                <div class="clearfix"></div>
              </div>
              <div class="main_uqr_u">
                <ul class="boxha">
                  <li
                    v-for="(pics, index) in monitorForm.form.pics"
                    :key="index"
                    @mouseover="pics.show = true"
                    @mouseleave="pics.show = false"
                  >
                    <label
                      class="el-upload-list__item-status-label"
                      v-if="pics.main == 1"
                    >
                      <i class="el-icon-upload-success el-icon-check"></i>
                    </label>
                    <el-image
                      fit="fill"
                      :src="pics.url"
                      :preview-src-list="album"
                    >
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                    <div class="boxdq image_po" v-if="pics.show">
                      <span title="查看">
                        <svg-icon
                          icon-class="zoom-out"
                          @click.stop="handlePictureCardPreview(pics)"
                        />
                      </span>
                      <span title="删除">
                        <svg-icon
                          icon-class="commodity_delete"
                          @click.prevent="handleRemove(pics)"
                        />
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="clearfix"></div>
            <div class="maincla_ed">
              <Editor
                api-key="vl7byj8kh7hyvvi6o7137s7khcpfsp762987dlnbcd93u37a"
                v-model="monitorForm.form.detail"
                :init="init"
              ></Editor>
            </div>
            <div class="main_tile box marginTop20">
              <div class="main_tile_l"><em></em>SKU设置</div>
              <div
                class="maincla_ra"
                v-if="monitorForm.form.standard_goods_id > 0 ? false : true"
              >
                <el-radio-group
                  v-model="monitorForm.form.transfer"
                  :border="true"
                  @change="radioGrou"
                >
                  <el-radio :label="1">可互调</el-radio>
                  <el-radio :label="0">不可互调</el-radio>
                </el-radio-group>
              </div>
            </div>

            <div class="main_table row-expand-down">
              <div class="goods_sku_flex">
                <div @click="plus" class="goods_sku_jc">
                  <span class="el-icon-plus"></span>
                  <span>添加规格</span>
                </div>
                <div
                  v-for="(item_m, index) of monitorForm.list"
                  :key="index"
                  class="goods_sku_ge"
                  @click="select_index(index)"
                  :style="
                    index == s_i_t
                      ? 'background:#03A98E;color:#ffffff;border-color:#03A98E'
                      : ''
                  "
                >
                  <div class="goods_close_jc">
                    <span
                      :style="
                        index == s_i_t
                          ? 'color:#ffffff;margin-right:auto'
                          : 'margin-right:auto'
                      "
                      v-show="item_m.base == 1"
                      >基础</span
                    >
                    <span
                      v-show="item_m.base == 0"
                      @click.stop="item_m.id ? reduce(index, 2) : reduce(index)"
                      class="el-icon-close"
                    ></span>
                  </div>
                  <div class="goods_sku_name">
                    <span>{{ item_m.spu_title }}</span>
                  </div>
                </div>
              </div>
              <div class="goods_name">
                <el-form
                  :inline="true"
                  :model="monitorForm.list[s_i_t]"
                  class="demo-form-inline"
                  label-width="100px"
                  :rules="rules"
                  ref="aabb"
                >
                  <div class="goods_sku_content">
                    <el-form-item
                      label="规格名称"
                      prop="spu_name"
                      :rules="rules.spu_name"
                    >
                      <el-autocomplete
                        :disabled="
                          monitorForm.list[s_i_t].standard_spu_id ? show : false
                        "
                        v-if="monitorForm.form.transfer == 0"
                        v-model="monitorForm.list[s_i_t].spu_title"
                        ref="searchSelect"
                        class="wid_237"
                        @clear="clearData(monitorForm.list[s_i_t], 1)"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="规格"
                        clearable
                        @select="
                          (item) => {
                            handleSelect(
                              item,
                              monitorForm.list[s_i_t],
                              s_i_t,
                              1
                            );
                          }
                        "
                      >
                      </el-autocomplete>

                      <el-autocomplete
                        :disabled="
                          monitorForm.list[s_i_t].standard_spu_id ? show : false
                        "
                        v-if="monitorForm.form.transfer == 1"
                        v-model="monitorForm.list[s_i_t].spu_title"
                        ref="searchSelect"
                        class="wid_237"
                        @clear="clearData(monitorForm.list[s_i_t], 1)"
                        :fetch-suggestions="spuSearchAsync"
                        placeholder="规格"
                        clearable
                        @select="
                          (item) => {
                            handleSelect(
                              item,
                              monitorForm.list[s_i_t],
                              s_i_t,
                              1
                            );
                          }
                        "
                      >
                      </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="单位" prop="unit" :rules="rules.unit">
                      <template v-if="monitorForm.form.transfer == 1">
                        <el-input
                          :disabled="sit_type == 1"
                          class="wid_237"
                          v-model="monitorForm.list[s_i_t].spu_unit"
                          placeholder="单位"
                          clearable
                        >
                        </el-input>
                      </template>
                      <template v-if="monitorForm.form.transfer == 0">
                        <el-autocomplete
                          :disabled="
                            monitorForm.list[s_i_t].standard_spu_id
                              ? show
                              : false
                          "
                          v-model="monitorForm.list[s_i_t].spu_unit"
                          ref="unitSelect"
                          class="wid_237"
                          @clear="clearData(monitorForm.list[s_i_t], 2)"
                          :fetch-suggestions="unitSearchAsync"
                          placeholder="单位"
                          clearable
                          @select="
                            (item) => {
                              handleSelect(
                                item,
                                monitorForm.list[s_i_t],
                                s_i_t,
                                2
                              );
                            }
                          "
                        >
                        </el-autocomplete>
                      </template>
                    </el-form-item>
                    <el-form-item label="描述">
                      <el-input
                        class="wid_237"
                        v-model="monitorForm.list[s_i_t].describe"
                        placeholder="描述"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="互调比"
                      prop="package_num"
                      :rules="rules.package_num"
                    >
                      <el-input
                        v-model="monitorForm.list[s_i_t].package_num"
                        class="wid_237"
                        placeholder="互调比"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="编码SKU">
                      <el-input
                        v-model="monitorForm.list[s_i_t].goods_spu_code"
                        class="wid_237"
                        placeholder="编码SKU"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="采购价"
                      prop="purchase_price"
                      :rules="rules.purchase_price"
                    >
                      <el-input
                        v-model="monitorForm.list[s_i_t].purchase_price"
                        class="wid_237"
                        placeholder="采购价"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="市场价"
                      prop="market_price"
                      :rules="rules.market_price"
                    >
                      <el-input
                        v-model="monitorForm.list[s_i_t].market_price"
                        class="wid_237"
                        placeholder="市场价"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-form-item label="起订量">
                      <el-input
                        v-model="monitorForm.list[s_i_t].minimum"
                        class="wid_237"
                        placeholder="起订量"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="损耗率">
                      <el-input
                        v-model="monitorForm.list[s_i_t].attrition_rate"
                        class="wid_237"
                        placeholder="损耗率"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-form-item label="库存设置">
                      <el-radio-group
                        v-model="monitorForm.list[s_i_t].designated_inventory"
                      >
                        <el-radio :label="0">不指定库存</el-radio>
                        <el-radio :label="-1">指定实际库存</el-radio>
                        <el-radio
                          :label="
                            monitorForm.list[s_i_t].demo_designated_inventory
                          "
                          >自定义库存</el-radio
                        >
                        <div class="too">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            placement="bottom"
                          >
                            <div slot="content">注释：输入数量必须大于0</div>
                            <svg
                              aria-hidden="true"
                              class="navbar_svg"
                              width="16"
                              height="16"
                            >
                              <use xlink:href="#icon-summary_question" />
                            </svg>
                          </el-tooltip>
                        </div>
                      </el-radio-group>
                      <div class="input_100">
                        <el-input
                          v-if="
                            monitorForm.list[s_i_t].demo_designated_inventory ==
                            monitorForm.list[s_i_t].designated_inventory
                          "
                          @blur="blur_input"
                          @input="edit_inventory"
                          onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
                          v-model="monitorForm.list[s_i_t].designated_inventory"
                          placeholder="库存"
                        ></el-input>
                      </div>
                    </el-form-item>

                    <el-form-item
                      label="状态"
                      prop="status"
                      :rules="rules.status"
                    >
                      <el-switch
                        v-model="monitorForm.list[s_i_t].status"
                        active-color="#03A98E"
                        active-text="开"
                        inactive-text="关"
                        class="mainor_switch"
                      ></el-switch>
                    </el-form-item>
                  </div>
                </el-form>
              </div>
              <!-- <el-table
                ref="multipleTable"
                :data="monitorForm.list"
                element-loading-text="加载中"
                fit
                highlight-current-row
                :header-cell-class-name="this.$verticaline"
              >
                <el-table-column type="expand" width="1">
                  <template slot-scope="props">
                    <div class="maincla_zh box">
                      <span>1{{ props.row.unit | unit(info) }}约</span>
                      <el-form-item
                        :prop="'list.' + props.$index + '.transfer_num'"
                        :rules="rules.transfer_num"
                        label-width="10px"
                        label=" "
                      >
                        <el-input
                          v-model.trim="props.row.transfer_num"
                          placeholder
                          clearable
                          class="wid110"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        :prop="'list.' + props.$index + '.transfer_unit'"
                        :rules="rules.transfer_unit"
                        label-width="10px"
                        label=" "
                        style="margin-left: 5px"
                      >
                        <el-select
                          v-model.trim="props.row.transfer_unit"
                          placeholder="规格"
                          class="wid110"
                          @change="isEdit = true"
                        >
                          <el-option
                            v-for="(unit, index) in info.unit"
                            :key="index"
                            :label="unit.title"
                            :value="unit.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <p @click="toogleExpand_qx(props.row, props.$index)">
                        取消转换
                      </p>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="规格"
                  prop="spu_name"
                  class-name="main_hei"
                  width="340"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="maincla_sx boxnr">
                      <div class="maincla_sxf">
                        <svg
                          aria-hidden="true"
                          class="main_page_svg"
                          width="15"
                          height="15"
                          @click="plus"
                        >
                          <use xlink:href="#icon-commodity_plus" />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="main_page_svg"
                          width="22"
                          height="22"
                          v-if="scope.$index != 0"
                          @click="
                            scope.row.id
                              ? reduce(scope.$index, 2)
                              : reduce(scope.$index)
                          "
                        >
                          <use xlink:href="#icon-commodity_reduce" />
                        </svg>
                      </div>
                      <span class="maincla_sxs">{{
                        monitorForm.form.transfer == 1
                          ? scope.$index == 0
                            ? "基础"
                            : ""
                          : ""
                      }}</span>

                      <el-form-item
                        :prop="'list.' + scope.$index + '.spu_name'"
                        :rules="rules.spu_name"
                        label=" "
                        label-width="10px"
                      >
                        <el-autocomplete
                          :disabled="scope.row.disabled"
                          v-if="monitorForm.form.transfer == 0"
                          v-model="scope.row.spu_title"
                          ref="tableSelect"
                          class="wid140"
                          @clear="clearData(scope.row, 1)"
                          :fetch-suggestions="querySearchAsync"
                          placeholder="规格"
                          clearable
                          @select="
                            (item) => {
                              handleSelect(item, scope.row, scope.$index, 1);
                            }
                          "
                        >
                        </el-autocomplete>

                        <el-autocomplete
                          :disabled="scope.row.disabled"
                          v-if="monitorForm.form.transfer == 1"
                          v-model="scope.row.spu_title"
                          ref="tableSelect"
                          class="wid140"
                          @clear="clearData(scope.row, 1)"
                          :fetch-suggestions="spuSearchAsync"
                          placeholder="规格"
                          clearable
                          :highlight-first-item="true"
                          value-key="title"
                          @select="
                            (item) => {
                              handleSelect(item, scope.row, scope.$index, 1);
                            }
                          "
                        >
                        </el-autocomplete>
                      </el-form-item>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="单位"
                  prop="unit"
                  class-name="main_hei"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div class="maincla_dw boxnr">
                      <div class="maincla_dwp boxnr">
                        <div
                          v-if="monitorForm.form.transfer == 1"
                          class="maincla_dwp_un"
                        >
                          {{ scope.row.spu_unit }}
                        </div>

                        <el-form-item
                          :prop="'list.' + scope.$index + '.unit'"
                          :rules="rules.unit"
                          label-width="10px"
                          label=" "
                          v-if="monitorForm.form.transfer == 0"
                        >
                          <el-autocomplete
                            v-model="scope.row.spu_unit"
                            ref="unitSelect"
                            class="wid140"
                            @clear="clearData(scope.row, 2)"
                            :fetch-suggestions="unitSearchAsync"
                            placeholder="单位"
                            clearable
                            @select="
                              (item) => {
                                handleSelect(item, scope.row, scope.$index, 2);
                              }
                            "
                          >
                          </el-autocomplete>
                        </el-form-item>
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="描述"
                  prop="describe"
                  class-name="main_hei"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.describe'"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.describe"
                        placeholder="描述"
                        clearable
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="互调比"
                  prop="package_num"
                  :class-name="monitorForm.form.transfer == 1 ? 'main_hei' : ''"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div class="maincla_bz">
                      <span v-if="monitorForm.form.transfer == 0">{{
                        scope.row.package_num
                      }}</span>
                      <div class="boxnr" v-else>
                        <el-form-item
                          :prop="'list.' + scope.$index + '.package_num'"
                          :rules="rules.package_num"
                          label-width="10px"
                          label=" "
                        >
                          <el-input
                            v-model.trim="scope.row.package_num"
                            placeholder="互调比"
                            clearable
                            class="wid110"
                          ></el-input>
                        </el-form-item>
                        <span class="marginLeft5">{{
                          monitorForm.list[0].unit | unit(info)
                        }}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="编码sku"
                  prop="goods_spu_code"
                  class-name="main_hei"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.goods_spu_code'"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.goods_spu_code"
                        placeholder="编码"
                        clearable
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="采购价"
                  prop="purchase_price"
                  class-name="main_hei"
                  :render-header="renderHeader"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.purchase_price'"
                      :rules="rules.purchase_price"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.purchase_price"
                        placeholder="采购价"
                        clearable
                        :class="[
                          'wid110',
                          {
                            red:
                              parseFloat(scope.row.purchase_price) >
                              parseFloat(scope.row.market_price),
                          },
                        ]"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="市场价"
                  prop="market_price"
                  class-name="main_hei"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.market_price'"
                      :rules="rules.market_price"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.market_price"
                        placeholder="市场价"
                        clearable
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="起订量"
                  prop="minimum"
                  class-name="main_hei"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.minimum'"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.minimum"
                        placeholder="起订量"
                        clearable
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="损耗率"
                  prop="attrition_rate"
                  class-name="main_hei"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.attrition_rate'"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.attrition_rate"
                        placeholder="损耗率"
                        clearable
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="center"
                  fixed="right"
                  width="100"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.status"
                      active-color="#03A98E"
                      active-text="开"
                      inactive-text="关"
                      class="mainor_switch"
                      @change="isEdit = true"
                    ></el-switch>
                  </template>
                </el-table-column>
              </el-table> -->
            </div>

            <div class="clearfix"></div>
            <div class="newConBox_p200 paddingBottom10" id="newConBox">
              <div class="newConBox_h32">
                <div :class="['boxdq newConBox ', { on: searchBarFixed }]">
                  <div class="mainor_prl">
                    <!-- <el-button
                      type="primary"
                      @click="preservation(1)"
                      v-repeatClick
                      >保存并继续修改</el-button
                    > -->
                    <el-button
                      class="reset marginLeft10"
                      v-repeatClick
                      type="primary"
                      @click="preservation(2)"
                      >保存并返回列表</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import init from "./init";
import { uploadPath, images_delete, puzzleImg } from "@/api/currency";
import {
  goods_base,
  goods_edit,
  goods_info,
  goods_delete,
  goods_likeData,
} from "@/api/commodity/commodityList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { recursion, category } from "@/utils/index";
import vPinyin from "@/utils/pinyin-py";
import rules from "@/rules/commodity/commodity_List_add";
import { mapGetters } from "vuex";
const shuju = {
  list: {
    spu_title: "",
    spu_unit: "",
    base: 0,
    spu_name: "",
    unit: "",
    package_num: 1,
    transfer_unit: "",
    transfer_num: 0,
    is_float: true,
    standard_spu_id: 0,
    standard_spu_code: "",
    down: false,
    goods_spu_code: "",
    market_price: "",
    purchase_price: "",
    minimum: "",
    attrition_rate: "",
    status: true,
    exp: "",
    madein: "",
    designated_inventory: 0,
  },
  form: {
    name: "",
    byname: "",
    category_id: [],
    pid: "",
    pinyin: "",
    goods_code: "",
    brand: "",
    pics: [],
    pic: "",
    sort: 0,
    describe: "",
    use_byname: false,
    use_code: [0],
    standard_goods_id: 0,
    standard_code: "",
    status: true,
    is_recommend: true,
    is_standard: true,
    specify: false,
    label_ids: [],
    detail: "",
    transfer: 1,
    exp: "",
    tax_rate: "",
    madein: "",
    purchase_relation: {
      purchase_type: 1,
      buyer_id: "",
      supply_id: "",
    },
  },
};

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  components: {
    Editor,
  },
  filters: {
    unit(id, arry) {
      if (arry.unit) {
        let name = "";
        arry.unit.forEach((e) => {
          if (e.id == id) {
            name = e.title;
          }
        });
        return name;
      }
    },
  },
  watch: {
    "monitorForm.list": {
      handler(val) {
        let num = 0;
        val.map((e) => {
          if (!e.status) {
            num = num + 1;
          }
        });
        num == val.length
          ? ((this.monitorForm.form.status = false),
            (this.sku_all_status = true))
          : (this.sku_all_status = false);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      isLoading: true,
      // SKU列表数据
      album: [],
      puzzleImg,
      monitorForm: {
        list: [
          {
            spu_title: "",
            spu_unit: "",
            base: 1,
            spu_name: "",
            unit: "",
            package_num: 1,
            transfer_unit: "",
            transfer_num: 0,
            is_float: true,
            standard_spu_id: 0,
            standard_spu_code: "",
            down: false,
            goods_spu_code: "",
            market_price: "",
            purchase_price: "",
            minimum: "",
            attrition_rate: "",
            status: true,
            designated_inventory: 0,
            demo_designated_inventory: 1,
          },
        ],
        // 搜索
        form: {
          name: "",
          byname: "",
          category_id: [],
          pid: "",
          pinyin: "",
          goods_code: "",
          brand: "",
          pics: [],
          pic: "",
          sort: 0,
          describe: "",
          status: true,
          use_byname: false,
          use_code: [0],
          standard_goods_id: 0,
          standard_code: "",
          is_recommend: true,
          is_standard: true,
          specify: false,
          label_ids: [],
          detail: "",
          transfer: 1,
          exp: "",
          tax_rate: "",
          madein: "",
          purchase_relation: {
            purchase_type: 1,
            buyer_id: "",
            supply_id: "",
          },
        },
      },
      sku_all_status: false, //sku是否全部关闭
      // 初始列表数据
      inlist: [
        {
          spu_title: "",
          spu_unit: "",
          base: 1,
          spu_name: "",
          unit: "",
          package_num: 1,
          transfer_unit: "",
          transfer_num: 0,
          is_float: true,
          standard_spu_id: 0,
          standard_spu_code: "",
          down: false,
          goods_spu_code: "",
          market_price: "",
          purchase_price: "",
          minimum: "",
          attrition_rate: "",
          status: true,
        },
      ],
      // 富文本
      init,
      // 验证
      rules,
      // 上传图片
      filelist: [],
      uploadPath,
      dialogImageUrl: "",
      dialogVisible: false,
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
      },
      // 信息
      info: {
        unit: [],
      },
      // id
      id: this.$route.params.id,
      // 监听滚动
      searchBarFixed: false,
      isEdit: false,
      spu_name_title: "",
      s_i_t: 0,
      sit_type: 1,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    // 下拉信息
    this.goods_base().then(() => {
      this.goods_info();
    });
  },
  updated() {},
  beforeRouteLeave(to, from, next) {
    if (this.isEdit) {
      setTimeout(() => {
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            // 正常跳转
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    } else {
      next();
    }
  },
  methods: {
    blur_input(val) {
      if (val.target.value < 0.1 || !val.target.value) {
        val.target.value = 1;
      }
    },
    edit_inventory(val) {
      if (!val) {
        val = "";
      }
      this.monitorForm.list[this.s_i_t].demo_designated_inventory = val;
      this.monitorForm.list[this.s_i_t].designated_inventory = val;
    },
    select_index(index) {
      if (
        this.monitorForm.list[this.s_i_t].spu_name &&
        this.monitorForm.list[this.s_i_t].unit &&
        this.monitorForm.list[this.s_i_t].package_num &&
        this.monitorForm.list[this.s_i_t].purchase_price &&
        this.monitorForm.list[this.s_i_t].market_price
      ) {
        this.s_i_t = index;
      } else {
        this.$message.error("必填项未填写");
      }
    },
    changePurchaseType($event) {
      this.monitorForm.form.purchase_relation.supply_id = "";
      this.monitorForm.form.purchase_relation.buyer_id = "";
    },
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 标准编码
    checkboxGroup(val) {
      this.monitorForm.form.use_code = [];
      this.monitorForm.form.use_code.push(val);
    },
    // 获取首字母
    inputName(val) {
      let gs = vPinyin.chineseToPinYin(val);
      let SX = "";
      let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (!/^(\d+\.?)?\d{0,2}$/.test(gs)) {
        if (reg.test(val)) {
          for (var i = 0; i < gs.length; i++) {
            var c = gs.charAt(i);
            if (/^[A-Z]+$/.test(c)) {
              SX += c;
            }
          }
        } else {
          for (var i = 0; i < gs.length; i++) {
            var c = gs.charAt(i);
            SX += c.toUpperCase();
          }
        }
      }
      this.monitorForm.form.pinyin = SX;
    },
    // 取消展开行
    toogleExpand_qx(row, index) {
      let $table = this.$refs.multipleTable;
      this.monitorForm.list[index].down = false;
      $table.toggleRowExpansion(row, false);
    },
    // 展开行
    toogleExpand(row, index) {
      let $table = this.$refs.multipleTable;
      this.monitorForm.list[index].down = !this.monitorForm.list[index].down;
      this.monitorForm.list.map((item) => {
        if (item.down) {
          $table.toggleRowExpansion(item, true);
        } else {
          $table.toggleRowExpansion(item, false);
        }
      });
    },
    // 上架状态
    statusChange() {
      if (this.sku_all_status) {
        this.$message.warning("请至少开启一个SKU");
        this.monitorForm.form.status = false;
      }
    },
    // SKU设置
    radioGrou(val) {
      this.isEdit = true;
      let arr = this.info.unit;
      let list = this.info.attribute;
      this.monitorForm.list.map((item) => {
        switch (val) {
          case 0:
            item.is_can = item.spu_name;
            item.spu_name = item.no_can;
            item.spu_title = "";
            item.spu_unit = "";

            list.map((e) => {
              if (e.id == item.spu_name) {
                item.spu_title = e.title;
              }
            });

            item.is_unit = item.unit;
            item.unit = item.no_unit;

            arr.map((e) => {
              if (e.id == item.unit) {
                item.spu_unit = e.title;
              }
            });
            break;
          case 1:
            item.no_can = item.spu_name;
            item.spu_name = item.is_can;
            item.spu_title = "";

            item.no_unit = item.unit;
            item.unit = item.is_unit;
            item.spu_unit = "";
            console.log(arr);
            arr.map((c) => {
              if (item.unit == c.id) {
                item.spu_title = c.title;
                item.spu_unit = c.title;
              }
            });

            break;
        }
      });
    },
    // SKU设置-加
    plus() {
      if (
        this.monitorForm.list[this.s_i_t].spu_name &&
        this.monitorForm.list[this.s_i_t].unit &&
        this.monitorForm.list[this.s_i_t].package_num &&
        this.monitorForm.list[this.s_i_t].purchase_price &&
        this.monitorForm.list[this.s_i_t].market_price
      ) {
        this.s_i_t = this.monitorForm.list.length;
        this.monitorForm.list.push(JSON.parse(JSON.stringify(shuju.list)));
        this.inlist.push(JSON.parse(JSON.stringify(shuju.list)));
      } else {
        this.$message.error("必填项未填写");
      }
    },
    // SKU设置-减
    reduce(index, type) {
      // this.monitorForm.list.splice(index, 1);
      // this.inlist.splice(index, 1);
      // let $table = this.$refs.multipleTable;
      if (type) {
        this.delet(index, 2);
      } else {
        this.monitorForm.list.splice(index, 1);
        this.inlist.splice(index, 1);
        if (this.s_i_t >= 1) {
          this.s_i_t -= 1;
        }
      }
      // this.$nextTick(() => {
      //   this.monitorForm.list.map((item) => {
      //     // if (item.down) {
      //     //   $table.toggleRowExpansion(item, true);
      //     // } else {
      //     //   $table.toggleRowExpansion(item, false);
      //     // }
      //   });
      // });
    },
    // 删除
    delet(index, type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                id: this.monitorForm.list[index].id,
                type: type,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.monitorForm.list[index].id, type: type }
      );
      goods_delete(data).then((res) => {
        if (res.errcode == 0) {
          this.monitorForm.list.splice(index, 1);
          this.inlist.splice(index, 1);
          if (this.s_i_t >= 1) {
            this.s_i_t -= 1;
          }
          this.$message.success("删除成功");
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 采购价？注释
    renderHeader(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              // console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content: "最近一次",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 损耗率？注释
    renderHeader1(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              // console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content: "最近一次",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 上传图片-删除
    handleRemove(file) {
      console.log();
      this.$confirm("确定删除图片？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let isupdata = this.filelist.findIndex(
            (item) => item.path == file.path
          );
          if (isupdata != -1) {
            let data = Object.assign(
              {
                sign: Md5(
                  objKeySort(Object.assign(apiUrl().name, { id: file.id })) +
                    apiUrl().appsecret
                ),
              },
              apiUrl().name,
              { id: file.id }
            );
            images_delete(data).then((res) => {
              if (res.errcode == 0) {
                const i = this.monitorForm.form.pics.findIndex(
                  (item) => item.path == file.path
                );
                this.monitorForm.form.pics.splice(i, 1);
                this.$refs.upload.uploadFiles.splice(i, 1);
              } else {
                this.$message.error(res.errmsg);
              }
            });
          } else {
            try {
              const i = this.monitorForm.form.pics.findIndex(
                (item) => item.path == file.path
              );
              if (i >= 0) {
                this.monitorForm.form.pics.splice(i, 1);
                this.$refs.upload.uploadFiles.splice(i, 1);
              }
            } catch (error) {
              console.log(error);
            }
          }
        })
        .catch((e) => {});
    },
    // 上传图片-删除
    // beforeRemove(file, fileList) {
    //   this.isEdit = true;
    //   let a = true;
    //   if (file && file.status === "success") {
    //     a = this.$confirm("确定删除图片？");
    //   }
    //   return a;
    // },
    // 上传图片-查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      console.log(fileList, this.filelist);
      this.isEdit = true;
      this.monitorForm.form.pics.push({
        name: "",
        main: 0,
        path: res.data.path,
        url: res.data.src,
        show: false,
      });
      this.album.push(res.data.src);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error("上传商品图片大小不能超过 1MB!");
      }
      return isLt2M;
    },
    // 保存
    preservation(id) {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          this.$refs["aabb"].validate((valids) => {
            if (valids) {
              let dage = false;
              dage = this.monitorForm.list.every((ii) => {
                return (
                  (ii.spu_title,
                  ii.spu_unit,
                  ii.package_num,
                  ii.purchase_price,
                  ii.market_price) != ""
                );
              });
              if (!dage) return this.$message.error("SKU“必填项不能为空”");
              let arry = JSON.parse(JSON.stringify(this.monitorForm.form));
              this.monitorForm.list.forEach((i) => {
                delete i.demo_designated_inventory;
              });
              let sz = JSON.parse(JSON.stringify(this.monitorForm.list));
              let list = sz.map((a) => {
                a.transfer_unit = a.transfer_unit ? a.transfer_unit : 0;
                let {
                  down,
                  standard_goods_id,
                  disabled,
                  is_can,
                  no_can,
                  is_unit,
                  no_unit,
                  spu_title,
                  spu_unit,
                  spu_name_title,
                  ...sz
                } = a;
                return { ...sz };
              });
              if (arry.use_byname) {
                if (arry.byname == null || arry.byname == undefined) {
                  this.$message.warning("您勾选了使用别名，请填入");
                  return;
                }
              }
              arry.use_code = arry.use_code[0];
              arry.specify = arry.specify ? 1 : 0;
              arry.status = arry.status ? 1 : 0;
              arry.use_byname = arry.use_byname ? 1 : 0;
              arry.is_recommend = arry.is_recommend ? 1 : 0;
              arry.is_standard = arry.is_standard ? 1 : 0;
              arry.pid = arry.category_id[0];
              arry.purchase_relation.buyer_id = arry.purchase_relation.buyer_id
                ? arry.purchase_relation.buyer_id
                : 0;
              arry.purchase_relation.supply_id = arry.purchase_relation
                .supply_id
                ? arry.purchase_relation.supply_id
                : 0;
              arry.category_id = category(arry.category_id);
              arry.label_ids =
                arry.label_ids.length != 0 ? arry.label_ids.join(",") : "";
              arry.pic = arry.pics[0] ? arry.pics[0].path : "";
              arry.pics =
                arry.pics.length != 0
                  ? arry.pics.map((p) => p.path).join(",")
                  : "";
              arry.purchase_relation = JSON.stringify(arry.purchase_relation);
              let data = Object.assign(
                {
                  sign: Md5(
                    objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
                      apiUrl().appsecret
                  ),
                },
                apiUrl().name,
                arry,
                { list: JSON.stringify(list), id: this.id }
              );
              goods_edit(data).then((res) => {
                if (res.errcode == 0) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  if (id == 2) {
                    this.isEdit = false;
                    this.$router.go(-1);
                  }
                } else {
                  this.$message.error(res.errmsg);
                }
              });
            }
          });
        }
      });
    },
    // 下拉信息
    goods_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      return new Promise((resolve, reject) => {
        goods_base(data).then((res) => {
          if (res.errcode == 0) {
            this.options = recursion(res.data.category);
            res.data.brand.map((e) => {
              e.value = e.title;
            });
            res.data.attribute.map((c) => {
              c.value = c.title;
            });
            res.data.unit.map((d) => {
              d.value = d.title;
            });
            this.info = res.data;
            resolve();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      });
    },
    // 基本信息
    goods_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      goods_info(data).then((res) => {
        if (res.errcode == 0) {
          this.standard(res.data);
          // console.log(res.data.tax_rate)
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    standard(data, type) {
      let arry = [];
      let use_code = [];
      use_code.push(parseInt(data.info.use_code));
      data.info.spu.map((e, index) => {
        e.status = e.status == 1 ? true : false;
        e.is_can = "";
        e.is_unit = "";
        e.no_can = "";
        e.no_unit = "";
        e.spu_title = "";
        e.spu_unit = "";
        let isExist = false;
        let attrIsExit = false;
        if (data.info.transfer > 0) {
          this.info.unit.map((unit) => {
            if (unit.id == e.spu_name) {
              isExist = true;
              e.spu_title = unit.title;
              e.spu_unit = unit.title;
              return;
            }
          });
          e.spu_name = isExist ? parseInt(e.spu_name) : "";
        } else if (data.info.transfer == 0) {
          this.info.attribute.map((unit) => {
            if (unit.id == e.spu_name) {
              attrIsExit = true;
              e.spu_title = unit.title;
              return;
            }
          });
          this.info.unit.map((u) => {
            if (u.id == e.unit) {
              attrIsExit = true;
              e.spu_unit = u.title;
              return;
            }
          });
          e.spu_name = attrIsExit ? parseInt(e.spu_name) : "";
        }
        console.log(this.info.attribute);
        if (index == 0) {
          if (!isExist) {
            e.disabled = false;
          } else {
            e.disabled = true;
          }
        }
        if (e.standard_spu_id == 0) {
          e.disabled = false;
        } else {
          e.disabled = true;
        }
        e.transfer_unit = e.transfer_unit ? parseInt(e.transfer_unit) : "";
        e.down = false;
      });

      data.info.images.forEach((a) => {
        arry.push({
          name: "",
          path: a.path,
          url: this.avatar.domain + "/" + a.path,
          id: a.id,
          main: a.main,
          show: false,
        });
      });
      this.monitorForm.form.use_code = use_code;
      this.monitorForm.form.name = data.info.name;
      this.monitorForm.form.byname = data.info.byname;
      this.monitorForm.form.category_id = [
        data.info.pid,
        data.info.category_id,
      ];
      this.monitorForm.form.pid = data.info.pid;
      this.monitorForm.form.pinyin = data.info.pinyin;
      this.monitorForm.form.goods_code = data.info.goods_code;
      this.monitorForm.form.brand = data.info.brand
        ? parseInt(data.info.brand)
        : "";
      //根据id去匹配商品品牌
      let id = this.monitorForm.form.brand;
      this.info.brand.map((e) => {
        if (id == e.id) {
          this.spu_name_title = e.title;
        }
      });

      if (data.info.purchase_relation.length != 0) {
        let buyer = "";
        let supplier = "";
        let direct_supply = "";

        if (this.info.buyer) {
          buyer = Object.keys(this.info.buyer);
        }

        if (this.info.supplier) {
          supplier = Object.keys(this.info.supplier);
        }
        if (this.info.direct_supply) {
          direct_supply = Object.keys(this.info.direct_supply);
        }

        this.monitorForm.form.purchase_relation.buyer_id =
          data.info.purchase_relation[0].buyer_id == 0
            ? ""
            : parseInt(data.info.purchase_relation[0].buyer_id);

        let supply_type = data.info.purchase_relation[0].supply_type;

        if (supply_type == 1) {
          this.monitorForm.form.purchase_relation.purchase_type = parseInt(
            data.info.purchase_relation[0].bind_type
          );
        } else if (supply_type == 2) {
          this.monitorForm.form.purchase_relation.purchase_type = parseInt(3);
        }

        this.monitorForm.form.purchase_relation.supply_id =
          data.info.purchase_relation[0].supplier_id == 0
            ? ""
            : parseInt(data.info.purchase_relation[0].supplier_id);

        let buyer_id = String(this.monitorForm.form.purchase_relation.buyer_id);
        let supplier_id = String(
          this.monitorForm.form.purchase_relation.supply_id
        );

        if (!buyer.includes(buyer_id)) {
          this.monitorForm.form.purchase_relation.buyer_id = "";
        }
        if (!supplier.includes(supplier_id) && supply_type == 1) {
          this.monitorForm.form.purchase_relation.supplier_id = "";
        }
        if (!direct_supply.includes(supplier_id) && supply_type == 2) {
          this.monitorForm.form.purchase_relation.supplier_id = "";
        }
      }
      this.monitorForm.form.pics = JSON.parse(JSON.stringify(arry));
      this.filelist = JSON.parse(JSON.stringify(arry));
      this.monitorForm.form.pic = data.info.pic;
      this.monitorForm.form.sort = data.info.sort;
      // 产地
      this.monitorForm.form.madein = data.info.madein;
      this.monitorForm.form.exp = data.info.exp;
      this.monitorForm.form.tax_rate = data.info.tax_rate;
      this.monitorForm.form.describe = data.info.describe;
      this.monitorForm.form.specify = data.info.specify == 1 ? true : false;
      this.monitorForm.form.status = data.info.status == 1 ? true : false;
      this.monitorForm.form.is_recommend =
        data.info.is_recommend == 1 ? true : false;
      this.monitorForm.form.is_standard =
        data.info.is_standard == 1 ? true : false;
      this.monitorForm.form.use_byname =
        data.info.use_byname == 1 ? true : false;
      this.monitorForm.form.label_ids = data.info.label_ids
        ? data.info.label_ids.split(",").map((e) => parseInt(e))
        : [];
      this.monitorForm.form.transfer = data.info.transfer;
      this.monitorForm.list = JSON.parse(JSON.stringify(data.info.spu));
      console.log(this.monitorForm.list, "数据是什么");
      this.monitorForm.list.forEach((is) => {
        if (is.designated_inventory > 0) {
          is.demo_designated_inventory = is.designated_inventory;
        } else {
          is.demo_designated_inventory = 1;
        }
      });
      this.inlist = JSON.parse(JSON.stringify(data.info.spu));
      this.monitorForm.form.detail = data.info.detail;
      this.monitorForm.form.standard_goods_id = data.info.standard_goods_id;
      this.monitorForm.form.standard_code = data.info.standard_code;
      this.isLoading = false;
    },

    handleSelect(item, row, index, type) {
      if (type == 1) {
        if (this.monitorForm.form.transfer == 1) {
          row.unit = item.id;
          row.spu_name = item.id;
          row.spu_title = item.title;
          row.spu_unit = item.title;
          let item_str = "list." + index + ".spu_name";
          this.$refs["userListFrom"].clearValidate(item_str);
        } else {
          row.spu_title = item.title;
          row.spu_name = item.id;
          let item_str = "list." + index + ".spu_name";
          this.$refs["userListFrom"].clearValidate(item_str);
        }
      } else {
        row.spu_unit = item.title;
        row.unit = item.id;
        let item_unit = "list." + index + ".unit";
        this.$refs["userListFrom"].clearValidate(item_unit);
      }
    },
    clearData(row, type) {
      if (type == 1) {
        if (this.monitorForm.form.transfer == 1) {
          row.spu_name = "";
          row.spu_title = "";
          row.unit = "";
          row.spu_unit = "";
        } else {
          row.spu_name = "";
          row.spu_title = "";
        }
      } else {
        row.spu_unit = "";
        row.unit = "";
      }
    },
    // 品牌搜索/
    newSearchAsync(queryString, cb) {
      let restaurants = this.info.brand;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 不可互调规格搜索
    querySearchAsync(queryString, cb) {
      let spu_list = this.info.attribute;
      let results = queryString
        ? spu_list.filter(this.createFilter(queryString))
        : spu_list;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //不可互调单位搜索
    unitSearchAsync(queryString, cb) {
      let unit_list = this.info.unit;
      let results = queryString
        ? unit_list.filter(this.createFilter(queryString))
        : unit_list;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 可互调规格搜索
    spuSearchAsync(queryString, cb) {
      let spu_list = this.info.unit;
      let results = queryString
        ? spu_list.filter(this.createFilter(queryString))
        : spu_list;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //选择事件
    brandSelect(item) {
      this.monitorForm.form.brand = item.id;
    },
    //清空事件
    bradnclearData() {
      this.spu_name_title = "";
      this.monitorForm.form.brand = "";
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.maincla_form {
  /deep/.el-table .cell .el-table__expand-icon {
    display: none;
  }
  margin-left: 10px;
  margin-top: 10px;
  /deep/.el-form-item--mini.el-form-item,
  /deep/.el-form-item--small.el-form-item {
    margin-bottom: 22px;
  }
  .label_ids {
    display: block;
    /deep/.el-form-item__content {
      width: 85%;
    }
  }
  .maincla_lea {
    font-size: 0;
    span {
      min-width: 70px;
      padding-left: 10px;
      padding-right: 10px;
      height: 32px;
      line-height: 30px;
      display: inline-block;
      vertical-align: middle;
      align-items: center;
      text-align: center;
      font-size: $font_14;
      color: $colour_3;
      border: 1px solid $subActive;
      &:hover {
        cursor: pointer;
      }
      &.on {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
  }
  .main_tile {
    margin-left: -10px;
  }
  .maincla_te {
    width: 59.7%;
    /deep/.el-form-item__content {
      width: calc(100% - 110px);
    }
  }
  .maincla_ed {
    margin-top: 20px;
    margin-left: 10px;
    width: 66%;
  }
  .maincla_ra {
    margin-top: 4px;
    margin-left: 30px;
    /deep/.el-radio {
      margin-right: 15px;
    }
  }
  .main_table {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
    .maincla_sx {
      .maincla_sxf {
        margin-right: 15px;
        margin-left: 10px;
        margin-top: 2px;
        svg {
          display: block;
          &:nth-child(2) {
            margin-left: -4px;
            margin-top: 5px;
          }
          &:hover {
            cursor: pointer;
          }
        }
        use {
          fill: #c1c1c1ff;
        }
      }
      .maincla_sxs {
        width: 80px;
        margin-right: 20px;
        color: $colour_3;
      }
    }
    .maincla_dw {
      .maincla_dwp {
        .maincla_dwp_un {
          min-width: 90px;
          text-align: left;
          margin-right: 10px;
        }
        .wid110 /deep/.el-input__inner {
          width: 90px;
          padding-left: 0px;
        }
        /deep/.el-select .el-input .el-select__caret {
          font-weight: bold;
          color: $colour_3;
        }
        /deep/.el-input__inner {
          border: 0;
          background: none;
        }
        strong {
          width: 40px;
          line-height: 16px;
          display: inline-block;
          vertical-align: middle;
          color: $menuActiveText;
          margin-left: -7px;
        }
        &:hover {
          cursor: pointer;
          & strong {
            text-decoration: underline;
          }
        }
      }
      p {
        i {
          font-size: 18px;
          color: $menuText;
        }
      }
    }
    .maincla_bz {
      input {
        margin-right: 5px;
      }
    }
    /deep/.el-table tr.down td {
      border-bottom: 0;
    }
    .maincla_zh {
      margin-left: 517px;
      margin-bottom: 5px;
      margin-top: 10px;
      align-items: center;
      & > span {
        margin-right: 5px;
      }
      /deep/.el-select--small {
        margin-left: 5px;
      }
      p {
        color: $colour_red;
        margin-left: 10px;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.red >>> input {
  color: red !important;
}
//sku_new设置
.wid_237 {
  width: 237px;
}
.goods_sku_flex {
  width: 100%;
  max-width: 1130px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  .goods_sku_jc {
    width: 164px;
    height: 61px;
    border: 1px dashed #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #cccccc;
    margin-right: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    span {
      font-size: 14px;
    }
    &:hover {
      border-color: #4fa388;
      color: #4fa388;
    }
  }
  .goods_sku_ge {
    width: 210px;
    height: 61px;
    border: 1px solid #cccccc;
    font-size: 14px;
    color: #191919;
    padding: 6px 5px;
    margin-right: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    .goods_close_jc {
      font-size: 12px;
      display: flex;
      justify-content: flex-end;
      span {
        &:nth-child(1) {
          color: #999999;
        }
        &:nth-child(2) {
          margin-left: auto;
        }
      }
    }
    .goods_sku_name {
      width: 198px;
      display: flex;
      justify-content: center;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.goods_name {
  width: 100%;
  height: auto;
  .goods_sku_content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1130px;
    /deep/.el-form-item {
      margin-bottom: 0 !important;
    }
    /deep/.el-input__inner {
      width: 237px;
    }
    /deep/.el-radio-group {
      display: flex;
      flex-direction: column;
      width: 237px;
    }
    /deep/.el-radio__inner {
      border: 1px solid #555;
    }
    /deep/.el-radio {
      margin-bottom: 10px;
    }
    /deep/.el-radio__inner::after {
      width: 8px;
      height: 8px;
      left: 7px;
      top: 7px;
    }
  }
}
/deep/.el-radio {
  font-weight: 400;
}
.input_100 {
  display: flex;
  /deep/.el-input__inner {
    width: 113px !important;
    margin-right: 10px;
  }
}
.too {
  width: auto;
  height: auto;
  position: absolute;
  top: 57px;
  left: 107px;
  .navbar_svg {
    vertical-align: top;
    use {
      fill: #c1c1c1;
    }
  }
}
// /deep/ .el-upload-list__item.is-success .el-upload-list__item-status-label{
//   display: none;
// }
.image_po {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 92;
  width: 100%;
  height: 100%;
  padding-left: 15px;
  border-radius: 4px;
  padding-right: 15px;
  background: $subMenuHover;
  span {
    &:first-child {
      .svg-icon {
        font-size: $font_18;
      }
    }
  }
  .svg-icon {
    font-size: $font_16;
    color: $white;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
